<template>
    <div class="notFound">
        <div class="box">
            <van-image class="my-image" :src="avatarImage" fit="fill" />
            <div class="text-box">
                <div class="text-box-title">抱歉! 当前页面不存在...</div>
                <van-button type="primary" @click="routerPush">返回首页</van-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { isPhone } from '@/utils';
    import { useStore } from '@/store';

    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    const { isLocked } = storeToRefs(store);
    const avatarImage = new URL('@/assets/img/404.png', import.meta.url).href;
    // const avatarImage: Raw<any[]> = markRaw([new URL('@/assets/img/avatar/avatar.png', import.meta.url).href])

    const routerPush = () => {
        router.replace({
            path: '/',
        });
    };
</script>

<style lang="scss" scoped>
    .notFound {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #fff;
    }
    .box {
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .my-image {
        width: 80vw;
        height: 80vw;
        box-sizing: border-box;
    }
    .text-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .text-box-title {
            padding-bottom: 20px;
            font-size: 20px;
            font-weight: bold;
            color: rgb(64, 158, 255);
        }
    }
</style>
